<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        div{
            width: 200px;
            height: 150px;
            position: relative;/*做参照物*/
            overflow: hidden;
        }
        img{
            width: 200px;
            height: 160px;
            position: absolute;
        }

    </style>
</head>
<body>
<div>
    <img src="mm1.jpg" alt="">
    <img src="mm2=0.jpg" alt="">
    <img src="mm3=0.jpg" alt="">
</div>
<script src="../js/jquery-1.4.2.js"></script>
<script>
    //得到所有图片并遍历 i为遍历过程中的下标
    $("img").each(function(i){
        //修改每个图片的位置
        $(this).css("left",i*200+"px");

    })

    function change(){
        //开启定时器
        let timer = setInterval(function () {
            //得到所有的图片并遍历
            $("img").each(function () {
                //得到原来left值
                let left = parseInt($(this).css("left"));
                left-=2;
                if(left<=-200){
                    left=400;
                    clearInterval(timer);//停止定时器
                }
                $(this).css("left",left+"px");
            })
        },10)
    }

    //开启定时器换图片
    setInterval(change,3000)


</script>


</body>
</html>